<template>
  <div>
    <el-row :gutter="8">
      <el-col :span="24">
        <el-card>
          <el-form inline>
            <el-form-item label="查询时间范围">
              <el-date-picker
                v-model="dateStr"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card header="在线数据">
          <scEcharts height="400px" :option="logsChartOption1"></scEcharts>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import scEcharts from "@/components/scEcharts";
import { listZxsj } from "@/api/yqhs/zxsj";
import dayjs from "dayjs";
import { computed } from "vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const { id } = toRefs(props);
const dateStr = ref(dayjs(new Date()).format("YYYY-MM-DD"));

const chartData = ref({
  categoryData: [],
  guanya: [],
  yqclzzpqnd: [],
  xyqyqnd: [],
  rglyjyqnd: [],
  jyqyqnd: [],
});
const handleQuery = () => {
  listZxsj({ jyzId: id.value, shijian: dateStr.value }).then((res) => {
    if (res && res.rows) {
      let categoryData = [];
      let guanya = [];
      let yqclzzpqnd = [];
      let xyqyqnd = [];
      let rglyjyqnd = [];
      let jyqyqnd = [];

      for (let row of res.rows) {
        categoryData.push(row.shijian);
        guanya.push(row.guanya);
        yqclzzpqnd.push(row.yqclzzpqnd);
        xyqyqnd.push(row.xyqyqnd);
        rglyjyqnd.push(row.rglyjyqnd);
        jyqyqnd.push(row.jyqyqnd);
      }
      chartData.value.categoryData = categoryData;
      chartData.value.guanya = guanya;
      chartData.value.yqclzzpqnd = yqclzzpqnd;
      chartData.value.xyqyqnd = xyqyqnd;
      chartData.value.rglyjyqnd = rglyjyqnd;
      chartData.value.jyqyqnd = jyqyqnd;
    } else {
      ElMessage.warning("暂无数据");
    }
  });
};
const logsChartOption1 = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      top: "5%",
      left: "right",
    },
    dataZoom: [
      {
        type: "inside",
      },
      {
        type: "slider",
      },
    ],
    xAxis: {
      data: chartData.value.categoryData,
      silent: false,
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
    },
    yAxis: {
      splitArea: {
        show: false,
      },
    },
    series: [
      {
        name: "罐压",
        type: "line",
        data: chartData.value.guanya,
        large: true,
      },
      {
        name: "油气处理装置排气浓度",
        type: "line",
        data: chartData.value.yqclzzpqnd,
        large: true,
      },
      {
        name: "卸油区油气浓度",
        type: "line",
        data: chartData.value.xyqyqnd,
        large: true,
      },
      {
        name: "人工量油井油气浓度",
        type: "line",
        data: chartData.value.rglyjyqnd,
        large: true,
      },
      {
        name: "加油区油气浓度",
        type: "line",
        data: chartData.value.jyqyqnd,
        large: true,
      },
    ],
  };
});

onMounted(() => {});
</script>
<style scoped></style>
